<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: center;
  }
  .bench_search {
    margin-bottom: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .marginR2 {
    margin-right: 2%;
  }
  .fontsize20 {
    font-size: 20px;
  }
  .fontTitle {
    font-size: 20px;
    height: 52px;
    text-align: right;
    padding-top: 16px;
    // vertical-align: bottom;
  }
  .fontContent {
    font-size: 20px;
    height: 52px;
    text-align: left;
    padding-top: 16px;
    color: #dc9387;
    // vertical-align: bottom;
  }
  .countNum {
    font-size: 35px;
    color: #dc9387;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
  .new-btn-sty1 {
    margin-right: 5px;
    color: #fff;
    background-color: #598ED1;
    border-color: #598ED1;
    font-weight: 500;
  }
  .text-overflow{
    width:300px; /* 超过宽度就显示... */
    text-overflow: ellipsis; /* 显示... */
    overflow: hidden; /* 隐藏文字 */
    white-space: nowrap; /* 不换行 */
    cursor: pointer; /* hover显示手形 */
  }
</style>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <Row class="search-info-style">
      <Col span="6">
        <span style="">标题：</span>
        <Input style="width: 70%;" v-model="searchInfo.title" />
      </Col>
      <Button class="new-btn-sty" @click="searchDatawork">
        <Icon type="ios-clock-outline" /> 刷新
      </Button>
      <Button class="new-btn-sty" @click="searchDatawork">
        <Icon type="ios-search" /> 搜索
      </Button>
      <!-- <Button class="new-btn-sty" @click="addModal = true">
        <Icon type="success" /> 添加投诉
      </Button> -->
    </Row>
    <Row>
      <Col span="24" >
        <Table  :columns="columns" :data="datalist" style="margin-top:10px"></Table>
        <Row v-if="searchInfo.loading1 == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
      </Col>
    </Row>
    <Page :total="searchInfo.totalnum" class="page_style" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total show-elevator show-sizer @on-page-size-change="changePagesize"/>
    <Modal
      v-model="addModal"
      title="添加投诉"
      @on-ok="addOk">
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">标题：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="addinfo.title" type="text"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">内容：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="addinfo.complaint_info" type="textarea"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">发生时间：</Col>
        <Col span="12" class="ivu-form-item-content">
          <DatePicker type="datetime"  v-model="addinfo.happent_time"></DatePicker>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">投诉对象：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="addinfo.complaint_name" type="text"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">本人姓名：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="addinfo.oneself_name" type="text"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">本人联系方式：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="addinfo.oneself_phone" type="text"></Input>
        </Col>
      </Row>
    </Modal>
    <Modal
      v-model="updateModal"
      title="修改投诉信息"
      @on-ok="updateOk">
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">标题：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="updateinfo.title" type="text"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">内容：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="updateinfo.complaint_info" type="textarea"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">发生时间：</Col>
        <Col span="12" class="ivu-form-item-content">
          <DatePicker type="datetime"  v-model="updateinfo.happent_time"></DatePicker>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">投诉对象：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="updateinfo.complaint_name" type="text"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">本人姓名：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="updateinfo.oneself_name" type="text"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">本人联系方式：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="updateinfo.oneself_phone" type="text"></Input>
        </Col>
      </Row>
    </Modal>
    <Modal
      v-model="handleModal"
      title="受理投诉"
      @on-ok="handleOk">
      <Row class="bench_search">
        <Col span="7" class="ivu-form-item-label">处理回执：</Col>
        <Col span="12" class="ivu-form-item-content">
          <Input v-model="handleInfo.remark" type="textarea"></Input>
        </Col>
      </Row>
    </Modal>
    <Modal
      v-model="deleteModal"
      title="删除"
      @on-ok="deleteOk()">
      是否确认删除？
    </Modal>
  </div>
</template>

<script>
import { getComplaintHandleList, addComplaint, deleteComplaint, updateComplaint, updateComplaintHandle, date2str } from '@/api/eventlist'
export default {
  data () {
    return {
      datalist: [],
      addModal: false,
      updateModal: false,
      handle_time1: '',
      deleteModal: false,
      handleModal: false,
      addinfo: {},
      updateinfo: {},
      deleteInfo: {},
      handleInfo: {},
      searchInfo: {
        currentPageNo: 1,
        currentPageSize: 10,
        loading1: true
      },
      columns: [
        { title: '编号', key: 'id', width: 150, align: 'center' },
        { title: '标题', key: 'title', minWidth: 80, align: 'center' },
        { title: '内容', key: 'complaint_info', minWidth: 80, align: 'center' },
        { title: '发生时间', key: 'happent_time', width: 100, align: 'center' },
        { title: '投诉对象', key: 'complaint_name', width: 100, align: 'center' },
        { title: '本人姓名', key: 'oneself_name', width: 100, align: 'center' },
        { title: '本人联系方式', key: 'oneself_phone', width: 120, align: 'center' },
        { title: '状态', key: 'stateName', width: 100, align: 'center' },
        { title: '解决时间', key: 'over_time', width: 100, align: 'center' },
        { title: '受理回执', key: 'remark', width: 100, align: 'center' }
        // { title: '操作',
        //   key: 'action',
        //   minWidth: 186,
        //   align: 'center',
        //   render: (h, params) => {
        //     let temp = []
        //     temp.push(
        //       h('Button', {
        //         props: { type: 'success', size: 'small' },
        //         style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
        //         on: {
        //           click: () => {
        //             this.handleModal = true
        //             this.handleInfo.row = params.row
        //           }
        //         }
        //       }, '处理'),
        //       h('Button', {
        //         props: { type: 'primary', size: 'small' },
        //         style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
        //         on: {
        //           click: () => {
        //             // this.updateinfo = params.row
        //             this.updateinfo.state = params.row.state
        //             this.updateinfo.id = params.row.id
        //             this.updateinfo.title = params.row.title
        //             this.updateinfo.complaint_info = params.row.complaint_info
        //             this.updateinfo.happent_time = params.row.happent_time
        //             this.updateinfo.complaint_name = params.row.complaint_name
        //             this.updateinfo.oneself_name = params.row.oneself_name
        //             this.updateinfo.oneself_phone = params.row.oneself_phone
        //             this.handle_time1 = params.row.happent_time
        //             console.log(params.row)
        //             this.updateModal = true
        //           }
        //         }
        //       }, '修改'),
        //       h('Button', {
        //         props: { type: 'error', size: 'small' },
        //         style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
        //         on: {
        //           click: () => {
        //             this.deleteModal = true
        //             this.deleteInfo.row = params.row
        //           }
        //         }
        //       }, '删除')
        //     )
        //     return h('div', temp)
        //   }
        // }
      ]
    }
  },
  methods: {
    init () {
      this.searchInfo.loading1 = true
      this.datalist = []
      let parasm = {
        'title': this.searchInfo.title,
        'company_code': this.$store.state.user.severUserInfo.company_code,
        'pageNo': this.searchInfo.currentPageNo,
        'pageSize': this.searchInfo.currentPageSize
      }
      getComplaintHandleList(parasm).then(ret => {
        if (ret.data.errcode === 0) {
          this.searchInfo.totalnum = ret.data.data.totalRecord
          let data = []
          ret.data.data.results.forEach(function (temp, index) {
            if (temp.state === '1') {
              temp.stateName = '已处理'
            } else {
              temp.stateName = '未处理'
            }
            data.push(temp)
          })
          this.datalist = data
          this.searchInfo.loading1 = false
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    updateComplaint () {
      let param = {
        id: this.updateinfo.id,
        title: this.updateinfo.title,
        complaint_info: this.updateinfo.complaint_info,
        happent_time: date2str(this.updateinfo.happent_time),
        complaint_name: this.updateinfo.complaint_name,
        oneself_name: this.updateinfo.oneself_name,
        oneself_phone: this.updateinfo.oneself_phone
      }
      updateComplaint(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('修改成功')
        } else {
          this.$Notice.error({
            title: '修改失败',
            desc: res.data.errmsg
          })
        }
      })
      this.init()
    },
    updateOk () {
      if (this.updateinfo.state === '1') {
        this.$Notice.error({
          title: '修改失败',
          desc: '已处理的投诉不可修改'
        })
      } else {
        this.updateComplaint()
      }
    },
    addOk () {
      this.addComplaint()
    },
    addComplaint () {
      let param = {
        title: this.addinfo.title,
        complaint_info: this.addinfo.complaint_info,
        happent_time: date2str(this.addinfo.happent_time),
        complaint_name: this.addinfo.complaint_name,
        oneself_name: this.addinfo.oneself_name,
        oneself_phone: this.addinfo.oneself_phone
      }
      addComplaint(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('添加成功')
          this.init()
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    deleteComplaint () {
      let param = {
        id: this.deleteInfo.row.id
      }
      deleteComplaint(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('删除成功')
          this.init()
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    deleteOk () {
      if (this.deleteInfo.row.state !== '1') {
        this.$Notice.error({
          title: '删除失败',
          desc: '未处理的投诉不可删除'
        })
      } else {
        this.deleteComplaint()
      }
    },
    updateComplaintHandle () {
      let param = {
        id: this.handleInfo.row.id,
        remark: this.handleInfo.remark
      }
      updateComplaintHandle(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('处理成功')
          this.init()
        } else {
          this.$Notice.error({
            title: '处理失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    handleOk () {
      if (this.handleInfo.row.state === '1') {
        this.$Notice.error({
          title: '处理失败',
          desc: '重复处理'
        })
      } else {
        this.updateComplaintHandle()
      }
    },
    searchDatawork () {
      this.init()
    },
    changePagesize (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.searchInfo.currentPageNo = pageNo
      this.init()
    }
  },
  mounted () {
    this.init()
  }
}
</script>
